<template>
  <div>
    <p>打水杯游戏</p><br>
    <el-button type="primary" @click="startgame">开始游戏</el-button>
    <div v-show="ishow" class="c1">
      <p>游戏页面</p><br>
      <p>时间:{{time}}</p>
      <img @click="dianji" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.-T6qjCQTDFhyL5_0SJdDLgHaE7?w=300&h=200&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="">
      <div class="ccc"><div class="ddd" :style="{ width: dddWidth + 'px' }"></div></div>
      <el-button type="primary" @click="fanhui">回到首页</el-button>
    </div>
    <div v-show="ishow1" class="c2">
      <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.iSMLifmfhLMoatTem1q7TgHaE8?w=252&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="">
      <p>用时:{{time}}</p>
      <el-button type="primary" @click="fanhui1">重新开始</el-button>
    </div>
  </div>
  <div style="display: flex;margin: 0;margin-top: 100px" >
    <div>
      <p>用户名</p><br>
      <input type="text" placeholder="用户名" v-model="username" /><br>
      <p>评论内容</p>
      <textarea placeholder="评论内容" v-model="comment"></textarea><br>
      <button @click="submitComment">提交</button>
    </div>
    <div>
      <h3>评论回复:</h3>
      <div v-for="(item,index) in comments" :key="index">
        <h5>{{item.username}}说:</h5>
        <div>{{item.comment}}</div>
        <button @click="deleteComment(index)">删除</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

// 控制游戏页面是否显示
const ishow = ref(false);
// 控制游戏结束页面是否显示
const ishow1 = ref(false);
// 设定的点击次数（示例为20次，可根据实际调整）
const xueliang = ref(getRandomInt(10, 30));
// 记录当前点击次数
const dianjishu = ref(0);
// 记录游戏用时（单位：秒）
const time = ref(0);
// 用于存储定时器的标识，初始化为null
let intervalId = null;
const dddWidth = ref(200);
//设置血量随机数
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
// 开始游戏函数
const startgame = () => {
  ishow.value = true;
  ishow1.value = false;
  time.value = 0; // 重置时间
  dianjishu.value = 0; // 重置点击数
  if (intervalId!== null) {
    // 如果定时器已存在，清除之前的定时器
    clearInterval(intervalId);
    intervalId = null;
  }
  // 启动定时器，每秒更新一次时间
  intervalId = setInterval(() => {
    time.value++;
  }, 1000);
}

// 点击图片的处理函数
const dianji = () => {
  dianjishu.value++;
  dddWidth.value -= 200 / xueliang.value;
  if (dianjishu.value === xueliang.value) {
    // 达到设定点击次数，清除定时器，切换页面显示
    clearInterval(intervalId);
    ishow.value = false;
    ishow1.value = true;
    console.log(time.value);
    alert('游戏结束')
  }
}

// 返回首页函数
const fanhui = () => {
  ishow.value = false;
  ishow1.value = false;
  time.value = 0; // 重置时间
  dianjishu.value = 0; // 重置点击数
  dddWidth.value = 200
  if (intervalId !== null) {
    clearInterval(intervalId);
    intervalId = null;
  }
}

// 重新开始游戏函数
const fanhui1 = () => {
  ishow.value = true;
  ishow1.value = false;
  dddWidth.value = 200
  time.value = 0; // 重置时间
  dianjishu.value = 0; // 重置点击数
  if (intervalId !== null) {
    clearInterval(intervalId);
    intervalId = null;
  }
  startgame(); // 重新调用开始游戏函数来启动新的一轮游戏
}


const username = ref('');
const comment = ref('');
const comments = ref([]);

function submitComment() {
  if (username.value && comment.value) {
    comments.value.push({ username: username.value, comment: comment.value });
    username.value = '';
    comment.value = '';
  }
}

function deleteComment(index) {
  comments.value.splice(index, 1);
}
</script>

<style scoped>
img {
  width: 200px;
  height: 300px;
}
.ccc{
  width: 200px;
  height: 20px;
  background-color: darkslateblue;
  border: 2px solid black;
  overflow: hidden;
}
.ddd{
  width: 200px;
  height: 20px;
  background-color: red;
  transition: width 0.1s linear;
}
</style>